ابهام‌زدایی از حلقه رویداد جاوا اسکریپت: درک صف‌های وظایف و مدیریت مایکروسک‌ها

جاوا اسکریپت، با وجود اینکه یک زبان تک‌رشته‌ای است، به طور مؤثری عملیات همزمان و ناهمگام را مدیریت می‌کند. این امر به لطف حلقه رویداد (Event Loop) هوشمندانه آن امکان‌پذیر شده است. درک نحوه عملکرد آن برای هر توسعه‌دهنده جاوا اسکریپت که قصد نوشتن برنامه‌های کارآمد و پاسخگو را دارد، حیاتی است. این راهنمای جامع به بررسی پیچیدگی‌های حلقه رویداد، با تمرکز بر صف وظایف (Task Queue) (که به آن صف پاسخ به تماس یا Callback Queue نیز گفته می‌شود) و صف مایکروسک‌ها (Microtask Queue) می‌پردازد.

حلقه رویداد جاوا اسکریپت چیست؟

حلقه رویداد یک فرآیند در حال اجراست که به طور مداوم پشته فراخوانی (call stack) و صف وظایف (task queue) را نظارت می‌کند. وظیفه اصلی آن این است که بررسی کند آیا پشته فراخوانی خالی است یا خیر. اگر خالی باشد، حلقه رویداد اولین وظیفه را از صف وظایف برداشته و آن را برای اجرا به پشته فراخوانی منتقل می‌کند. این فرآیند به طور نامحدود تکرار می‌شود و به جاوا اسکریپت اجازه می‌دهد تا چندین عملیات را به ظاهر به طور همزمان مدیریت کند.

آن را مانند یک کارگر کوشا در نظر بگیرید که دائماً دو چیز را بررسی می‌کند: «آیا در حال حاضر روی کاری مشغول هستم (پشته فراخوانی)؟» و «آیا کاری در انتظار من است (صف وظایف)؟» اگر کارگر بیکار باشد (پشته فراخوانی خالی باشد) و وظایفی در انتظار باشند (صف وظایف خالی نباشد)، کارگر وظیفه بعدی را برداشته و شروع به کار بر روی آن می‌کند.

در اصل، حلقه رویداد موتوری است که به جاوا اسکریپت اجازه می‌دهد عملیات غیرمسدودکننده (non-blocking) انجام دهد. بدون آن، جاوا اسکریپت به اجرای کد به صورت متوالی محدود می‌شد، که منجر به تجربه کاربری ضعیف، به ویژه در مرورگرهای وب و محیط‌های Node.js که با عملیات ورودی/خروجی، تعاملات کاربر و سایر رویدادهای ناهمگام سروکار دارند، می‌شد.

پشته فراخوانی (Call Stack): جایی که کد اجرا می‌شود

پشته فراخوانی (Call Stack) یک ساختار داده است که از اصل آخرین ورودی، اولین خروجی (LIFO) پیروی می‌کند. این جایی است که کد جاوا اسکریپت واقعاً اجرا می‌شود. وقتی یک تابع فراخوانی می‌شود، به بالای پشته فراخوانی اضافه (push) می‌شود. وقتی اجرای تابع به پایان می‌رسد، از پشته حذف (pop) می‌شود.

این مثال ساده را در نظر بگیرید:

function firstFunction() {
  console.log('First function');
  secondFunction();
}

function secondFunction() {
  console.log('Second function');
}

firstFunction();

در طول اجرا، پشته فراخوانی به این شکل خواهد بود:

1. در ابتدا، پشته فراخوانی خالی است.
2. firstFunction() فراخوانی شده و به پشته اضافه می‌شود.
3. درون firstFunction()، دستور console.log('First function') اجرا می‌شود.
4. secondFunction() فراخوانی شده و به بالای پشته (روی firstFunction()) اضافه می‌شود.
5. درون secondFunction()، دستور console.log('Second function') اجرا می‌شود.
6. اجرای secondFunction() تمام شده و از پشته حذف می‌شود.
7. اجرای firstFunction() تمام شده و از پشته حذف می‌شود.
8. پشته فراخوانی دوباره خالی است.

اگر یک تابع به صورت بازگشتی خود را بدون شرط خروج مناسب فراخوانی کند، می‌تواند منجر به خطای سرریز پشته (Stack Overflow) شود، که در آن پشته فراخوانی از حداکثر اندازه خود فراتر رفته و باعث از کار افتادن برنامه می‌شود.

صف وظایف (Task Queue یا Callback Queue): مدیریت عملیات ناهمگام

صف وظایف (Task Queue) (که به آن صف پاسخ به تماس یا Callback Queue یا Macrotask Queue نیز گفته می‌شود) صفی از وظایف است که منتظر پردازش توسط حلقه رویداد هستند. این صف برای مدیریت عملیات ناهمگام مانند موارد زیر استفاده می‌شود:

• توابع بازگشتی setTimeout و setInterval
• شنوندگان رویداد (مانند رویدادهای کلیک، فشار دادن کلید)
• توابع بازگشتی XMLHttpRequest (XHR) و fetch (برای درخواست‌های شبکه)
• رویدادهای تعامل کاربر

وقتی یک عملیات ناهمگام کامل می‌شود، تابع بازگشتی (callback) آن در صف وظایف قرار می‌گیرد. سپس حلقه رویداد این توابع را یک به یک برداشته و زمانی که پشته فراخوانی خالی باشد، آنها را اجرا می‌کند.

بیایید این موضوع را با یک مثال setTimeout نشان دهیم:

console.log('Start');

setTimeout(() => {
  console.log('Timeout callback');
}, 0);

console.log('End');

شاید انتظار داشته باشید خروجی این باشد:

Start
Timeout callback
End

اما خروجی واقعی این است:

Start
End
Timeout callback

دلیل آن این است:

1. console.log('Start') اجرا شده و "Start" را چاپ می‌کند.
2. setTimeout(() => { ... }, 0) فراخوانی می‌شود. حتی با تأخیر ۰ میلی‌ثانیه، تابع بازگشتی بلافاصله اجرا نمی‌شود. در عوض، در صف وظایف قرار می‌گیرد.
3. console.log('End') اجرا شده و "End" را چاپ می‌کند.
4. اکنون پشته فراخوانی خالی است. حلقه رویداد صف وظایف را بررسی می‌کند.
5. تابع بازگشتی از setTimeout از صف وظایف به پشته فراخوانی منتقل شده و اجرا می‌شود و "Timeout callback" را چاپ می‌کند.

این نشان می‌دهد که حتی با تأخیر ۰ میلی‌ثانیه، توابع بازگشتی setTimeout همیشه به صورت ناهمگام و پس از اتمام اجرای کد همزمان فعلی، اجرا می‌شوند.

صف مایکروسک‌ها (Microtask Queue): اولویت بالاتر از صف وظایف

صف مایکروسک‌ها (Microtask Queue) صف دیگری است که توسط حلقه رویداد مدیریت می‌شود. این صف برای وظایفی طراحی شده است که باید در اسرع وقت پس از اتمام وظیفه فعلی، اما قبل از اینکه حلقه رویداد صفحه را دوباره رندر کند یا رویدادهای دیگر را مدیریت کند، اجرا شوند. آن را به عنوان یک صف با اولویت بالاتر نسبت به صف وظایف در نظر بگیرید.

منابع رایج مایکروسک‌ها عبارتند از:

• Promiseها: توابع بازگشتی .then()، .catch() و .finally() مربوط به Promiseها به صف مایکروسک‌ها اضافه می‌شوند.
• MutationObserver: برای مشاهده تغییرات در DOM (مدل شیء سند) استفاده می‌شود. توابع بازگشتی Mutation observer نیز به صف مایکروسک‌ها اضافه می‌شوند.
• process.nextTick() (Node.js): یک تابع بازگشتی را برای اجرا پس از اتمام عملیات فعلی، اما قبل از ادامه حلقه رویداد، زمان‌بندی می‌کند. با وجود قدرتمند بودن، استفاده بیش از حد از آن می‌تواند منجر به گرسنگی ورودی/خروجی (I/O starvation) شود.
• queueMicrotask() (API نسبتاً جدید مرورگر): یک روش استاندارد برای قرار دادن یک مایکروسک در صف.

تفاوت کلیدی بین صف وظایف و صف مایکروسک‌ها این است که حلقه رویداد تمام مایکروسک‌های موجود در صف مایکروسک‌ها را قبل از برداشتن وظیفه بعدی از صف وظایف، پردازش می‌کند. این تضمین می‌کند که مایکروسک‌ها بلافاصله پس از اتمام هر وظیفه اجرا می‌شوند و تأخیرهای بالقوه را به حداقل رسانده و پاسخگویی را بهبود می‌بخشد.

این مثال را که شامل Promiseها و setTimeout است در نظر بگیرید:

console.log('Start');

Promise.resolve().then(() => {
  console.log('Promise callback');
});

setTimeout(() => {
  console.log('Timeout callback');
}, 0);

console.log('End');

خروجی به این صورت خواهد بود:

Start
End
Promise callback
Timeout callback

در اینجا تفکیک مراحل آمده است:

1. console.log('Start') اجرا می‌شود.
2. Promise.resolve().then(() => { ... }) یک Promise حل‌شده ایجاد می‌کند. تابع بازگشتی .then() به صف مایکروسک‌ها اضافه می‌شود.
3. setTimeout(() => { ... }, 0) تابع بازگشتی خود را به صف وظایف اضافه می‌کند.
4. console.log('End') اجرا می‌شود.
5. پشته فراخوانی خالی است. حلقه رویداد ابتدا صف مایکروسک‌ها را بررسی می‌کند.
6. تابع بازگشتی Promise از صف مایکروسک‌ها به پشته فراخوانی منتقل و اجرا می‌شود و "Promise callback" را چاپ می‌کند.
7. صف مایکروسک‌ها اکنون خالی است. سپس حلقه رویداد صف وظایف را بررسی می‌کند.
8. تابع بازگشتی setTimeout از صف وظایف به پشته فراخوانی منتقل و اجرا می‌شود و "Timeout callback" را چاپ می‌کند.

این مثال به وضوح نشان می‌دهد که مایکروسک‌ها (توابع بازگشتی Promise) قبل از وظایف (توابع بازگشتی setTimeout) اجرا می‌شوند، حتی زمانی که تأخیر setTimeout صفر باشد.

اهمیت اولویت‌بندی: مایکروسک‌ها در مقابل وظایف

اولویت‌بندی مایکروسک‌ها بر وظایف برای حفظ یک رابط کاربری پاسخگو بسیار مهم است. مایکروسک‌ها اغلب شامل عملیاتی هستند که باید در اسرع وقت برای به‌روزرسانی DOM یا مدیریت تغییرات داده‌های حیاتی اجرا شوند. با پردازش مایکروسک‌ها قبل از وظایف، مرورگر می‌تواند اطمینان حاصل کند که این به‌روزرسانی‌ها به سرعت منعکس می‌شوند و عملکرد درک شده برنامه را بهبود می‌بخشد.

به عنوان مثال، وضعیتی را تصور کنید که در آن شما در حال به‌روزرسانی UI بر اساس داده‌های دریافت شده از یک سرور هستید. استفاده از Promiseها (که از صف مایکروسک‌ها استفاده می‌کنند) برای مدیریت پردازش داده‌ها و به‌روزرسانی‌های UI تضمین می‌کند که تغییرات به سرعت اعمال می‌شوند و تجربه کاربری روان‌تری را فراهم می‌کنند. اگر برای این به‌روزرسانی‌ها از setTimeout (که از صف وظایف استفاده می‌کند) استفاده می‌کردید، ممکن بود تأخیر قابل توجهی وجود داشته باشد که منجر به یک برنامه کمتر پاسخگو می‌شد.

گرسنگی (Starvation): زمانی که مایکروسک‌ها حلقه رویداد را مسدود می‌کنند

در حالی که صف مایکروسک‌ها برای بهبود پاسخگویی طراحی شده است، استفاده محتاطانه از آن ضروری است. اگر به طور مداوم مایکروسک‌ها را به صف اضافه کنید بدون اینکه به حلقه رویداد اجازه دهید به سراغ صف وظایف برود یا به‌روزرسانی‌ها را رندر کند، می‌توانید باعث گرسنگی (starvation) شوید. این اتفاق زمانی می‌افتد که صف مایکروسک‌ها هرگز خالی نمی‌شود و به طور مؤثری حلقه رویداد را مسدود کرده و از اجرای وظایف دیگر جلوگیری می‌کند.

این مثال را در نظر بگیرید (عمدتاً در محیط‌هایی مانند Node.js که process.nextTick در دسترس است، مرتبط است، اما از نظر مفهومی در جاهای دیگر نیز قابل اعمال است):

function starve() {
  Promise.resolve().then(() => {
    console.log('Microtask executed');
    starve(); // به صورت بازگشتی یک مایکروسک دیگر اضافه می‌کند
  });
}

starve();

در این مثال، تابع starve() به طور مداوم توابع بازگشتی Promise جدیدی را به صف مایکروسک‌ها اضافه می‌کند. حلقه رویداد برای همیشه در حال پردازش این مایکروسک‌ها گیر می‌کند و از اجرای وظایف دیگر جلوگیری کرده و به طور بالقوه منجر به یخ زدن برنامه می‌شود.

بهترین شیوه‌ها برای جلوگیری از گرسنگی:

• تعداد مایکروسک‌های ایجاد شده در یک وظیفه را محدود کنید. از ایجاد حلقه‌های بازگشتی مایکروسک‌ها که می‌توانند حلقه رویداد را مسدود کنند، خودداری کنید.
• برای عملیات کمتر حیاتی از setTimeout استفاده کنید. اگر یک عملیات نیاز به اجرای فوری ندارد، به تعویق انداختن آن به صف وظایف می‌تواند از پر شدن بیش از حد صف مایکروسک‌ها جلوگیری کند.
• به پیامدهای عملکردی مایکروسک‌ها توجه داشته باشید. در حالی که مایکروسک‌ها به طور کلی سریع‌تر از وظایف هستند، استفاده بیش از حد از آنها همچنان می‌تواند بر عملکرد برنامه تأثیر بگذارد.

مثال‌ها و موارد استفاده در دنیای واقعی

مثال ۱: بارگذاری ناهمگام تصویر با Promiseها

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`Failed to load image at ${url}`));
    img.src = url;
  });
}

// مثال استفاده:
loadImage('https://example.com/image.jpg')
  .then(img => {
    // تصویر با موفقیت بارگذاری شد. DOM را به‌روز کنید.
    document.body.appendChild(img);
  })
  .catch(error => {
    // خطای بارگذاری تصویر را مدیریت کنید.
    console.error(error);
  });

در این مثال، تابع loadImage یک Promise را برمی‌گرداند که هنگام بارگذاری موفقیت‌آمیز تصویر resolve می‌شود یا در صورت وجود خطا reject می‌شود. توابع بازگشتی .then() و .catch() به صف مایکروسک‌ها اضافه می‌شوند و تضمین می‌کنند که به‌روزرسانی DOM و مدیریت خطا بلافاصله پس از اتمام عملیات بارگذاری تصویر اجرا شوند.

مثال ۲: استفاده از MutationObserver برای به‌روزرسانی‌های دینامیک UI

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    console.log('Mutation observed:', mutation);
    // UI را بر اساس تغییر به‌روز کنید.
  });
});

const elementToObserve = document.getElementById('myElement');

observer.observe(elementToObserve, {
  attributes: true,
  childList: true,
  subtree: true
});

// بعداً، عنصر را تغییر دهید:
elementToObserve.textContent = 'New content!';

MutationObserver به شما امکان می‌دهد تغییرات DOM را نظارت کنید. هنگامی که یک تغییر (mutation) رخ می‌دهد (به عنوان مثال، یک ویژگی تغییر می‌کند، یک گره فرزند اضافه می‌شود)، تابع بازگشتی MutationObserver به صف مایکروسک‌ها اضافه می‌شود. این تضمین می‌کند که UI به سرعت در پاسخ به تغییرات DOM به‌روز شود.

مثال ۳: مدیریت درخواست‌های شبکه با Fetch API

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log('Data received:', data);
    // داده‌ها را پردازش کرده و UI را به‌روز کنید.
  })
  .catch(error => {
    console.error('Error fetching data:', error);
    // خطا را مدیریت کنید.
  });

Fetch API یک روش مدرن برای ارسال درخواست‌های شبکه در جاوا اسکریپت است. توابع بازگشتی .then() به صف مایکروسک‌ها اضافه می‌شوند و تضمین می‌کنند که پردازش داده‌ها و به‌روزرسانی‌های UI به محض دریافت پاسخ اجرا شوند.

ملاحظات حلقه رویداد در Node.js

حلقه رویداد در Node.js مشابه محیط مرورگر عمل می‌کند اما دارای برخی ویژگی‌های خاص است. Node.js از کتابخانه libuv استفاده می‌کند که پیاده‌سازی حلقه رویداد را به همراه قابلیت‌های ورودی/خروجی ناهمگام فراهم می‌کند.

process.nextTick(): همانطور که قبلاً ذکر شد، process.nextTick() یک تابع مختص Node.js است که به شما امکان می‌دهد یک تابع بازگشتی را برای اجرا پس از اتمام عملیات فعلی، اما قبل از ادامه حلقه رویداد، زمان‌بندی کنید. توابع بازگشتی که با process.nextTick() اضافه می‌شوند، قبل از توابع بازگشتی Promise در صف مایکروسک‌ها اجرا می‌شوند. با این حال، به دلیل پتانسیل گرسنگی، process.nextTick() باید با احتیاط استفاده شود. queueMicrotask() به طور کلی در صورت در دسترس بودن ترجیح داده می‌شود.

setImmediate(): تابع setImmediate() یک تابع بازگشتی را برای اجرا در تکرار بعدی حلقه رویداد زمان‌بندی می‌کند. این شبیه به setTimeout(() => { ... }, 0) است، اما setImmediate() برای وظایف مربوط به ورودی/خروجی طراحی شده است. ترتیب اجرا بین setImmediate() و setTimeout(() => { ... }, 0) می‌تواند غیرقابل پیش‌بینی باشد و به عملکرد ورودی/خروجی سیستم بستگی دارد.

بهترین شیوه‌ها برای مدیریت کارآمد حلقه رویداد

• از مسدود کردن رشته اصلی خودداری کنید. عملیات همزمان طولانی‌مدت می‌توانند حلقه رویداد را مسدود کرده و برنامه را غیرپاسخگو کنند. تا حد امکان از عملیات ناهمگام استفاده کنید.
• کد خود را بهینه کنید. کد کارآمد سریع‌تر اجرا می‌شود، زمان صرف شده در پشته فراخوانی را کاهش می‌دهد و به حلقه رویداد اجازه می‌دهد وظایف بیشتری را پردازش کند.
• برای عملیات ناهمگام از Promiseها استفاده کنید. Promiseها روشی تمیزتر و قابل مدیریت‌تر برای مدیریت کد ناهمگام در مقایسه با توابع بازگشتی سنتی ارائه می‌دهند.
• مراقب صف مایکروسک‌ها باشید. از ایجاد مایکروسک‌های بیش از حد که می‌توانند منجر به گرسنگی شوند، خودداری کنید.
• برای کارهای محاسباتی سنگین از Web Workers استفاده کنید. Web Workers به شما امکان می‌دهند کد جاوا اسکریپت را در رشته‌های جداگانه اجرا کنید و از مسدود شدن رشته اصلی جلوگیری کنید. (مختص محیط مرورگر)
• کد خود را پروفایل کنید. از ابزارهای توسعه‌دهنده مرورگر یا ابزارهای پروفایلینگ Node.js برای شناسایی تنگناهای عملکردی و بهینه‌سازی کد خود استفاده کنید.
• رویدادها را Debounce و Throttle کنید. برای رویدادهایی که به طور مکرر فعال می‌شوند (مانند رویدادهای اسکرول، تغییر اندازه)، از debouncing یا throttling برای محدود کردن تعداد دفعات اجرای کنترل‌کننده رویداد استفاده کنید. این کار می‌تواند با کاهش بار روی حلقه رویداد، عملکرد را بهبود بخشد.

نتیجه‌گیری

درک حلقه رویداد، صف وظایف و صف مایکروسک‌های جاوا اسکریپت برای نوشتن برنامه‌های جاوا اسکریپت کارآمد و پاسخگو ضروری است. با درک نحوه عملکرد حلقه رویداد، می‌توانید تصمیمات آگاهانه‌ای در مورد نحوه مدیریت عملیات ناهمگام و بهینه‌سازی کد خود برای عملکرد بهتر بگیرید. به یاد داشته باشید که مایکروسک‌ها را به درستی اولویت‌بندی کنید، از گرسنگی جلوگیری کنید و همیشه تلاش کنید رشته اصلی را از عملیات مسدودکننده آزاد نگه دارید.

این راهنما یک نمای کلی جامع از حلقه رویداد جاوا اسکریپت ارائه داد. با به کارگیری دانش و بهترین شیوه‌های ذکر شده در اینجا، می‌توانید برنامه‌های جاوا اسکریپت قوی و کارآمدی بسازید که تجربه کاربری عالی را ارائه می‌دهند.